<!-- directive:title 超管登录多个系统 -->
<!-- directive:breadcrumb 超管登录-->
<div class='panel-body'>
    <div class='panel panel-default'>
        <div class='panel-heading'> url包含门店信息 </div>
        <div class='panel-body'>
            <article class="docs-content">
                <pre>看看我是不是能拿到父级元素的传参 {{sp}}</pre>
                <script type="text/xianjs" ui-bs>
                    {abstract:true, page:100, root:11, name: 'app', url: "/app:mid" },
                    {abstract:true, page:100, tree:60, name: 'app.tryidea', title:"想法尝试", url: "/tryidea:mid" },
                    // 测试父级元素传参 参数撞车了 会导致访问这个二级路由时候 丢失一级路由的参数
                </script>
                <p class="text-info">demo 搞定</p>
                <div class="membercardBox">
                    <a class="membercard membercard-1" href="admin.html#!/app111/tryidea1/superadmin" target="_block">
                        <div> 剩余4年 </div> <h1> 万达四楼双子星门店 </h1> <h2> 购卡时间：2019年1月4日 </h2>
                    </a>
                    <a class="membercard membercard-1" href="admin.html#!/app222/tryidea2/superadmin" target="_block">
                        <div> 剩余13天 </div> <h1> 红木楼9楼西楼头门店 </h1> <h2> 购卡时间：2018-11-22 </h2>
                    </a>
                    <a class="membercard membercard-1" href="admin.html#!/app333/tryidea3/superadmin" target="_block">
                        <div> 剩余2个月 </div> <h1> 北郡帕提欧南门炒鸡门店 </h1> <h2> 购卡时间：2019-1-4 11:34:44 </h2>
                    </a>
                    <a class="membercard membercard-2" href="admin.html#!/app111/tryidea1/superadmin" target="_block">
                        <div> 剩余4年 </div> <h1> 万达四楼双子星门店 </h1> <h2> 购卡时间：2019年1月4日 </h2>
                    </a>
                    <a class="membercard membercard-2" href="admin.html#!/app222/tryidea2/superadmin" target="_block">
                        <div> 剩余13天 </div> <h1> 红木楼A座1楼西楼头门店 </h1> <h2> 购卡时间：2018-11-22 </h2>
                    </a>
                    <a class="membercard membercard-3" href="admin.html#!/app333/tryidea3/superadmin" target="_block">
                        <div> 剩余2个月 </div> <h1> 北郡帕提欧南门炒鸡门店 </h1> <h2> 购卡时间：2019-1-4 11:34:44 </h2>
                    </a>
                    <a class="membercard membercard-3" href="admin.html#!/app111/tryidea1/superadmin" target="_block">
                        <div> 剩余4年 </div> <h1> 万达四楼双子星门店 </h1> <h2> 购卡时间：2019年1月4日 </h2>
                    </a>
                    <a class="membercard membercard-4" href="admin.html#!/app222/tryidea2/superadmin" target="_block">
                        <div> 剩余13天 </div> <h1> 红木楼A座1楼西楼头门店 </h1> <h2> 购卡时间：2018-11-22 </h2>
                    </a>
                    <a class="membercard membercard-4" href="admin.html#!/app333/tryidea3/superadmin" target="_block">
                        <div> 剩余2个月 </div> <h1> 北郡帕提欧南门炒鸡门店 </h1> <h2> 购卡时间：2019-1-4 11:34:44 </h2>
                    </a>
                </div>
            </article>
        </div>
    </div>
    <style ui-bs>
        .membercardBox{ display: flex; flex-flow: row wrap; align-content: flex-start;}
        .membercardBox .membercard{position: relative;display:block;width: 200px;height: 120px;margin-right: 10px;margin-bottom: 10px;padding-left: 15px;background:#000;box-shadow:0 0 4px 0 rgba(0,0,0,0.20);border-radius:8px;overflow: hidden;}
        .membercardBox .membercard-1{background-image:linear-gradient(-50deg, #ff65a5 0%, #ff8965 88%);}
        .membercardBox .membercard-2{background-image:linear-gradient(-50deg, #7962fb 0%, #b844f1 88%);}
        .membercardBox .membercard-3{background-image:linear-gradient(-50deg, #2d2d3b 0%, #484f63 88%);}
        .membercardBox .membercard-4{background-image:linear-gradient(-50deg, #3ea9ec 0%, #3bbbc6 88%);}
        .membercardBox .membercard:before{content:" ";background:#000;border-radius:20px 20px 80px 0;width:101px;height:48px;position: absolute;left: -8px;top: -22px;z-index: 10;}
        .membercardBox .membercard-1:before{background:#ff6c6c;}
        .membercardBox .membercard-2:before{background:#ce5dfc;}
        .membercardBox .membercard-3:before{background:#383e4e;}
        .membercardBox .membercard-4:before{background:#5dc1fc;}
        .membercardBox .membercard:after{content:" ";background: url() no-repeat;background-size: contain;position: absolute;right: -8px;z-index: 10;top: -6px;width: 120px;height: 58px;}
        .membercardBox .membercard div{position: absolute;left: 0;top:0;z-index: 11;width: 100%;padding: 0 0 0 10px;height: 26px;line-height: 26px;font-size:10px;color:#ffffff;letter-spacing:0;text-align:left;}
        .membercardBox .membercard h1{color: #fff;font-size:16px;color:#ffffff;letter-spacing:0;text-shadow:0 0 4px rgba(0,0,0,0.30);text-align:left;position: absolute;left: 0;top: 63px;z-index: 11;margin: 0;width: 100%;padding: 0 0 0 10px;height: 26px;}
        .membercardBox .membercard h2{color: #fff;font-size:10px;color:#ffffff;letter-spacing:0;text-align:left;position: absolute;left: 0;top: 96px;z-index: 11;margin: 0;width: 100%;padding: 0 0 0 10px;height: 26px;}
    </style>
    <div class='panel panel-default'>
        <div class='panel-heading'> 超管登录多个系统 </div>
        <div class='panel-body'>
            <div class="MyStoreList">
                <div class="MyStoreBg" style="background: url(http://via.placeholder.com/3) 0% 0% / 100% 100% no-repeat;">
                    <div class="MyStoreBgMask">
                        <span class="scrollBox scroll_text" scroll-text="" >
                            <div class="scroll_inner">
                                <span>圣诞节奥斯卡的圣诞节奥斯卡的圣诞节奥斯卡</span>
                            </div>
                        </span>
                        <!-- <imgsrc="img/lide/store_del.png" class="">
                        <imgsrc="img/lide/store_edit.png"> -->
                    </div>
                </div>
                <div class="MyStoreInfo">
                    <p class="MyStorePhone">
                       <!--  <imgsrc="img/lide/store_phone.png">：13111111111 -->
                        <label class="checkbox-inline i-switch">
                            <input type="checkbox" class="">
                            <i></i>
                        </label>
                    </p>
                    <div class="MyStoreAdress">
                        <!-- <imgsrc="img/lide/store_address.png"><span style="float:left;">：</span> -->
                        <p class="addressText">跃进街道和平东路 啊啊少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少</p>
                    </div>
                    <div class="clear"></div>
                    <p class="MyStoreCreateTime">创建时间：2018-03-23</p>
                    <p class="MyStoreInto">进入门店</p>
                </div>
            </div>
            <div class="MyStoreList">
                <div class="MyStoreBg" style="background: url(http://via.placeholder.com/3) 0% 0% / 100% 100% no-repeat;">
                    <div class="MyStoreBgMask">
                        <span class="scrollBox scroll_text" scroll-text="" >
                            <div class="scroll_inner">
                                <span>圣诞节奥斯卡的圣诞节奥斯卡的圣诞节奥斯卡</span>
                            </div>
                        </span>
                        <!-- <imgsrc="img/lide/store_del.png" class="">
                        <imgsrc="img/lide/store_edit.png"> -->
                    </div>
                </div>
                <div class="MyStoreInfo">
                    <p class="MyStorePhone">
                        <!-- <imgsrc="img/lide/store_phone.png"> -->：13111111111
                        <label class="checkbox-inline i-switch">
                            <input type="checkbox" class="">
                            <i></i>
                        </label>
                    </p>
                    <div class="MyStoreAdress">
                        <!-- <imgsrc="img/lide/store_address.png"><span style="float:left;">：</span> -->
                        <p class="addressText">跃进街道和平东路 啊啊少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少</p>
                    </div>
                    <div class="clear"></div>
                    <p class="MyStoreCreateTime">创建时间：2018-03-23</p>
                    <p class="MyStoreInto">进入门店</p>
                </div>
            </div>
            <div class="MyStoreBlock">
                <div class="MyStoreBlock1"></div>
                <div class="MyStoreBlock2"></div>
                <div class="MyStoreBlock3"></div>
                <div class="MyStoreBlock4"></div>
            </div>
            <div class="MyStoreBlock">
                <div class="MyStoreBlock1"></div>
                <div class="MyStoreBlock2"></div>
                <div class="MyStoreBlock3"></div>
                <div class="MyStoreBlock4"></div>
            </div>
            <div class="MyStoreBlock">
                <div class="MyStoreBlock1"></div>
                <div class="MyStoreBlock2"></div>
                <div class="MyStoreBlock3"></div>
                <div class="MyStoreBlock4"></div>
            </div>
        </div>
    </div>
    <style type="text/css" ui-bs>
        .MyStoreBlock{ background: #fff; box-shadow: 0 0 8px 2px rgba(0,0,0,0.06); border-radius: 2px; width: 282px; position: relative; height: 381px; float: left;border: 1px solid #ddd; margin-right: 24px; margin-bottom: 22px;}
        .MyStoreBlock1{ background: #f7f7f7; width: 100%; height: 203px;border-bottom: 1px solid #ddd;}
        .MyStoreBlock2{ position: absolute; width: 152px; height: 30px; top: 216px; left: 14px; background: #f7f7f7;}
        .MyStoreBlock3{ position: absolute; width: 100px; height: 30px; top: 262px; left: 14px; background: #f7f7f7;}
        .MyStoreBlock4{ position: absolute; width: 219px; height: 30px; top: 307px; left: 14px; background: #f7f7f7;}
    </style>
    <style type="text/css">
        .MyStoreTitle{margin: 10px 10px 0; background: #fff; padding: 30px 40px; min-height: 100px; min-width: 1080px;}
        .MyStoreList{background:#ffffff;box-shadow:0 0 8px 2px rgba(0,0,0,0.06);border-radius:2px;width:282px;height:381px;float: left;margin-right: 24px;margin-bottom: 22px;}
        .MyStoreList:hover{box-shadow:0 0 8px 2px rgba(0,0,0,0.2);}
        .MyStoreList .MyStoreBg{background:#ffffff;border-radius:2px;width:282px;height:203px;position: relative;}
        .MyStoreList .MyStoreInfo{background:#ffffff;border-radius:2px;width:282px;height:auto;position: relative;}
        .MyStoreList .MyStoreBg .MyStoreBgMask{background-image:linear-gradient(0deg, rgba(0,0,0,0.81) 0%, rgba(0,0,0,0.00) 100%);width:282px;height:63px;position: absolute;padding-left: 11px;bottom: 0px;left: 0px;font-family:Microsoft YaHei;font-size:18px;color:#ffffff;line-height: 63px;}
        .MyStoreList .MyStoreBg .MyStoreBgMask .scrollBox{width: 200px;height: 63px;line-height: 63px;text-align:left;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
        .MyStoreList .MyStoreBg .MyStoreBgMask .scrollBox .scroll_inner{width: 10000px; height: 63px; margin: 0 auto; white-space: nowrap; overflow: hidden;}
        .MyStoreList .MyStoreBg .MyStoreBgMask img{width: 18px; height: 18px; float: right; margin-top: 22px; margin-right: 10px;}
        .MyStoreList .MyStoreInfo .MyStorePhone{margin-top: 17px;font-family:Microsoft YaHei;font-size:12px;color:#666666;}
        .MyStoreList .MyStoreInfo .MyStorePhone .i-switch{float: right; margin-right: 20px;}
        .MyStoreList .MyStoreInfo .MyStorePhone img{width: 13px; height: 13px;margin-left: 13px;}
        .MyStoreList .MyStoreInfo .MyStoreAdress{font-family:Microsoft YaHei;font-size:12px;color:#666666;line-height:20px;}
        .MyStoreList .MyStoreInfo .MyStoreAdress .addressText{width: 232px;float: left;font-family:Microsoft YaHei;font-size:12px;color:#666666;line-height:20px;height:40px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
        .MyStoreList .MyStoreInfo .MyStoreAdress img{width: 13px; height: 16px;margin-left: 13px;float: left;position: relative;top: 2px;}
        .MyStoreList .MyStoreInfo .MyStoreCreateTime{text-align: center;font-family:Microsoft YaHei;font-size:12px;color:#999999;}
        .MyStoreList .MyStoreInfo .MyStoreInto{background:#ea544a;border-radius:2px;width:250px;height:36px;font-family:Microsoft YaHei;font-size:14px;color:#ffffff;margin:0 auto;line-height: 36px;text-align: center;}
        .MyStoreList .MyStoreInfo .MyStoreInto:hover{cursor: pointer;}
    </style>
    <div class='panel panel-default'>
        <div class='panel-heading'> 超管登录多个系统 </div>
        <div class='panel-body'>
            <article class="docs-content">
                <p>目的是实现一个用户(超管) 登录多个系统主键账户(门店)</p>
                <ul>
                    <li class="text-info">超管/普管 进入登录页面</li>
                    <li class="text-info">输入账号密码验证码 提交接口</li>
                    <li class="text-info">cookie记录用户信息 (yxsessionid)</li>
                    <li class="text-info">根据权限 跳转 "超管平台" 还是 "B端平台/商户平台"</li>
                    <li class="text-info">超管平台 可打开下属 商户平台 新页面打开</li>
                    <li class="text-info">url传递门店信息id</li>
                    <li class="text-info">-- 用户 yxsid 存入 cookie</li>
                    <li class="text-info">-- 用户 角色 存入 cookie</li>
                    <li class="text-info">-- 用户 门店id 存入 url 每次刷新都会读取</li>
                    <li class="text-info">系统收录id保存入global (全局变量/非cookie/非ls)</li>
                    <li class="text-info">读取接口 拿到这个id对应的信息 (名称/权限/模块)</li>
                    <li class="text-info">每个接口发送的http请求头信息都包含这个id 联通用户id</li>
                    <li class="text-info">每个系统刷新 都在url中取id 根据id找ls中对应的信息 没有就去访问接口</li>
                    <li class="text-info">结束</li>
                </ul>
                <p></p>
            </article>
        </div>
    </div>
</div>
